<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<script>
window.onload = function(){

             var imgs = document.querySelectorAll("img");
            //  选中所有的img然后赋值给imgs
            //let 声明变量 局部作用域
              for(let i=0;i<imgs.length;i++){

                imgs[i].onclick = function(){
                    // 点击事件
                 document.body.style.background='url(./'+(i+1)+'.jpg)';
             }
              }
}
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body{
        background: url(./1.jpg);
        
    }

    .a1 {
        width: 100%;
        height: 200px;
        background: url(./1.jpg);
        /* 设置背景图 */
        text-align: center;
        /* 居中 */
        background: rgba(255,255,255,.3);
    }

    .a1>img {
       padding: 50px 0; 
       cursor:pointer;
    }
</style>
<body>
    <div class="a1">
        <img width=150px; src="./1.jpg" alt="">
        <img width=150px; src="./2.jpg" alt="">
        <img width=150px; src="./3.jpg" alt="">
        <img width=150px; src="./4.jpg" alt="">
        <img width=150px; src="./5.jpg" alt="">
    </div>
</body>

</html>